<template>
	<view class="cell" @click="change">
		<view class="b-item" :style="cStyle">
			<view class="b-left">
				<view class="b-l-img" :style="iconStyle" v-if="item.icon">
					<image :src="item.icon" mode="widthFix"></image>
				</view>
				<view class="b-l-name" :style="labelStyle">
					{{item.label}}
					<button class="b-l-btn" type="default" open-type="contact" v-if="item.type=='contact'"></button>
				</view>
			</view>
			<view class="">
				<slot name="right">
					<view class="b-right" ></view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"aCell",
		props: {
			item: {
				type: Object,
				default: {"type": null, "label": '测试', "icon": ''}
			},
			
			/**
			 * item 样式
			 */
			cStyle: {
				type: String,
				default: () => ''
			},
			
			/**
			 * lable 样式
			 */
			labelStyle: {
				type: String,
				default: () => ''
			},
			
			/**
			 * icon 样式
			 */
			iconStyle: {
				type: String,
				default: () => ''
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			change() {
				this.$emit('change', {item: this.item})
			}
		}
	}
</script>

<style lang="scss" scoped>
 .cell {
	padding: 0 30rpx;
    background-color: $t-bg-b;
 }
 .cell:active {
	 opacity: .8 !important;
 }
 .b-item {
	@include f-c(space-between);
	height: 90rpx;
	border-bottom: 1rpx solid rgba(255, 255, 255, .11);
	.b-left {
		@include f-c(flex-start);
		 flex: 1;
		.b-l-img {
			width: 35rpx;
			// height: 38rpx;
			overflow: hidden;
			margin-right: 20rpx;
		}

		.b-l-name {
			position: relative;
			font-size: 34rpx;
			font-weight: 400;
			color: #fff;
			flex: 1;
			.b-l-btn {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: transparent;
				&::after {
					border: none;
				}
			}
		}
	}

	.b-right {
		@include arrow(17rpx, 17rpx, 45deg, 6rpx);
	}
}
</style>
